<template>
  <div>
    <el-link type="primary" :underline="false" @click="save">
      <i class="el-icon-document-checked" style="font-size:16px;" />
      保存
    </el-link>
    <!--<el-dropdown class="pl20" trigger="click">
      <span class="cursor-pointer text-primary">
        <i class="el-icon-view" style="font-size:16px;" />
        预览
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="previewForm('full')">
          页面预览
        </el-dropdown-item>
        <el-dropdown-item @click.native="previewForm('dialog')">
          对话框预览
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->
    <el-link class="pl20" type="primary" :underline="false" @click="previewForm('full')">
      <i class="el-icon-view" style="font-size:16px;" />
      预览
    </el-link>
    <el-link class="pl20" type="primary" :underline="false" @click="previewJson('export')">
      <i class="el-icon-view" style="font-size:16px;" />
      查看JSON
    </el-link>
    <el-link class="pl20" type="primary" :underline="false" @click="previewJson('import')">
      <i class="el-icon-upload2" style="font-size:16px;" />
      导入JSON
    </el-link>
    <el-link class="pl20" type="danger" :underline="false" @click="clearEmpty">
      <i class="el-icon-delete" style="font-size:16px;" />
      清空
    </el-link>
  </div>
</template>

<script>
export default {
  name: 'OperationButton',
  methods: {
    previewForm (type) {
      this.$emit('preview:form', type)
    },
    previewJson (type) {
      this.$emit('preview:config', type)
    },
    clearEmpty () {
      this.$emit('delete')
    },
    save () {
      this.$emit('save')
    }
  }
}
</script>

<style scoped>
div {
  display: flex;
  align-items: center;
}
</style>
